<h3 class="title">{{ template:title }}</h3>

{{if rooms}}
<div class="tree" style="overflow:hidden;padding-bottom:15px;">
<ul class="list so-do">
{{rooms}}
</ul>
</div>
{{endif}}
<?php if(count($employees)>0){ ?>
<h3 class="title1 ico2">{{helper:lang line='room:summary'}}</h3>
<div class="content">
	{{room:description}}
</div>

{{if room:phone}}
<h3 class="title1 ico2">{{helper:lang line='room:phone'}}</h3>
<div class="content">
	{{room:phone}}
</div>
{{endif}}
<h3 class="title1 ico1">{{helper:lang line='room:list'}} {{room:title}}</h3>
<div class="clr"><span class="block-color fl"></span><p class="fl">Chưa ký hợp đồng</p></div>
<div class="clr"></div>
<table class="tbl" cellspacing="0" cellpadding="0" border="0">
<thead>
	<tr>
    	<th width="50">{{helper:lang line='global:identifier'}}</th>
        <th>{{helper:lang line='users:full_name'}}</th>
        <th>{{helper:lang line='users:birth'}}</th>
        <!--<th>Hình</th>-->
        <th width="100">{{helper:lang line='users:phone'}}</th>
        <th width="70">{{helper:lang line='users:sex'}}</th>
        <th width="120">{{helper:lang line='users:position'}}</th>
        <th width="120">{{helper:lang line='users:room'}}</th>
        <th width="150">
        	<div class="action">
            </div>
        	<input type="checkbox" class="cbx-all" />
        </th>
    </tr>
    <tbody>
   	 	<?php foreach($employees as $item){ ?>
    	<tr class="vi stt-<?php echo $item->status?>">
        	<td class="tc">{{ helper:count identifier }}</td>
            
            <td class="tran"><a class="display_name" target="_blank" title="Xem thông tin" 
				href="{{ url:site uri='emp_profile/info/<?php echo $item->id ?>'}}"><?php echo $item->display_name ?></a>
				{{if is_admin}}
				
				<a class="fr" target="_blank" title="{{helper:lang line='global:edit'}}" href="{{url:site uri='users/edit/<?php echo $item->id?>'}}">
					{{helper:lang line='global:edit'}}
				</a>
				{{endif}}
			</td>
            <td>{{ helper:date format='d/m/Y' timestamp = '<?php echo $item->birth ?>' }}</td>
            <td><?php echo $item->phone ?></td>
            <td class="tc" >
			<?php foreach($sex_select as $key=>$value){
				if($key == $item->sex)
					echo $value;
			?>
			<?php } ?>
			</td>
            <td>
				<?php foreach($groups_select as $key=>$value){
				if($key == $item->group_id)
					echo $value;
			?>
			<?php } ?>
			</td>
            <td><?php echo $item->room_title ?></td>
            <td>
            	<input type="checkbox" class="cbx" value="<?php echo $item->id ?>" />
                
                	<!--<input type="radio" class="cbx" value="{{user_id}}" name="cbx" />-->
                
            </td>
        </tr>
        <?php } ?>
    </tbody>
</thead>
</table>
<div id="ajax_info" style="display:none"></div>

<!--Thong ke nam nu -->
<div class="l50">
<!--<h3 class="title2">
	{{helper:lang line='users:sex'}}
</h3>-->

<canvas id="chart-sex" class="pie" width="200" height="200"></canvas>

<ul class="not">
	<li><label> <span class="box-r" style="background:#F38630"></span>{{helper:lang line='users:male'}}:{{ male }} ♂ </label></li>
    <li><label> <span class="box-r" style="background:#00A02A"></span>{{helper:lang line='users:female'}}:{{ female }} ♀ </label></li>
</ul>
</div>

<!--Thong ke nam nu -->
<div class="l50 tr role">
<!--
<h3 class="title2">
	{{helper:lang line='users:literacy'}}
</h3>-->



<ul class="not">
	{{literacy}}
	<li><label> <span class="box-r" style="background:{{background}}"></span>{{title}} </label></li>
	{{/literacy}}
</ul>
<canvas id="chart-literacy" class="pie" width="200" height="200"></canvas>
</div>

<script type="text/javascript">
var profile;
$('.display_name').click(function(){
	$url = $(this).attr('href');
	if(profile != null)
		profile.abort();
	profile = $.ajax({
		url:$url,
		type:'get',
		success: function(data){
			$('#ajax_info').html(data);
		}
	});
	return false;
});
</script>
<script type="text/javascript">
var opt = {
	segmentShowStroke : true,
	segmentStrokeColor : "#fff",
	segmentStrokeWidth : 2,
	animation : true,
	animationSteps : 100,
	animationEasing : "easeOutBounce",
	animateRotate : true,
	animateScale : false,
	onAnimationComplete : null
};

var ctx = document.getElementById("chart-sex").getContext("2d");
var data = [
	{
		value: parseInt('{{ male }}'),//nam
		color:"#F38630"
	},
	{
		value : parseInt('{{ female }}'),//nu
		color : "#00A02A"
	}
];

var myNewChart = new Chart(ctx).Pie(data,opt);
//2
var ctx = document.getElementById("chart-literacy").getContext("2d");
var data = eval('{{json_literacy}}');
var myNewChart = new Chart(ctx).Pie(data,opt);
</script>
<?php } else {?>
<p class="no-data">{{helper:lang line='global:no_data'}}</p>
<?php } ?>